import React from 'react'

import './background.scss'
interface Props {
  type: String
  imgUrl?: String
  videoUrl?: String
  blur?: Boolean
  wave?: Boolean
}

// 通过参数传递数据
// 静态背景 / 动态背景

const Background = (props: Props) => {
  const wallType = () => {
    switch (props.type) {
      case 'img':
        return <div className="bg-cover"></div>
      case 'video':
        return (
          <div id="index-video" className="bg-video">
            <video autoPlay loop muted src={'video'}></video>
          </div>
        )
      case 'both':
        return (
          <>
            <div className="bg-cover"></div>
            <div id="index-video" className="bg-video">
              <video autoPlay loop muted src={'video'}></video>
            </div>
          </>
        )
      default:
        return (
          <>
            <div className="bg-cover"></div>
            <div id="index-video" className="bg-video">
              <video autoPlay loop muted src={'video'}></video>
            </div>
          </>
        )
    }
  }

  const wave = (
    <svg
      className="bg-wave-svg"
      id="page-wave-svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1440 260"
    >
      <path
        id="page-header-svg-path"
        d="M0,256L60,245.3C120,235,240,213,360,218.7C480,224,600,256,720,245.3C840,235,960,181,1080,176C1200,171,1320,213,1380,234.7L1440,256L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
      ></path>
    </svg>
  )

  return <div className="background">{wallType()}</div>
}

export default Background
